/*
 * @Author: Yxliam
 * @Date: 2023-12-12 11:44:53
 * @LastEditors: Yxliam
 * @LastEditTime: 2023-12-13 10:57:24
 * @Description: 
 */
import React, {useState, useEffect} from 'react';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';

import {
  View,
  Text,
  Image,
  StyleSheet,
  ScrollView,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import {Search, Toast, Button} from '@fruits-chain/react-native-xiaoshu';

import {homeApi, Home} from '../../api';
import {activeColor} from '../../common/color';
import styles from './styles';
import {p} from '../../utils/pxToDp';

// {navigation}
export default () => {
  const navigation = useNavigation<StackNavigationProp<any>>();

  // useEffect(() => {
  //   getHomeArticleList();
  //   getHomeCommodityList();
  //   getHomeAddressList();
  // }, []);

  // 获取首页文章列表
  const [homeArticleList, setHomeArticleList] =
    useState<Home.HomeArticleInfo[]>();
  const getHomeArticleList = async () => {
    const res = await homeApi.getHomeArticleListApi();
    console.log('res', res.data.list);
    setHomeArticleList(res.data.list);
  };

  // 获取首页商品
  const [homeCommodityList, setHomeCommodityList] =
    useState<Home.HomeCommodityInfo[]>();
  const getHomeCommodityList = async () => {
    const res = await homeApi.getHomeCommodityListApi();
    setHomeCommodityList(res.data.list);
  };

  // 获取首页商品
  const [homeAddressList, setHomeAddressList] =
    useState<Home.HomeAddressInfo[]>();
  const getHomeAddressList = async () => {
    const res = await homeApi.getHomeAddressListApi();
    setHomeAddressList(res.data.list);
  };

  const RenderHomeArticle = () => {
    const articleStyle = StyleSheet.create({
      contentLayout: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginHorizontal: p(20),
      },
      articleLayout: {
        width: p(160),
        height: p(180),
      },
      articleImage: {
        height: p(120),
      },
      articleTitle: {
        marginTop: p(6),
        marginBottom: p(2),
        color: '#000',
        fontSize: p(14),
      },
      articleInfo: {
        color: '#000',
        fontSize: p(12),
      },
    });
    return (
      <View style={articleStyle.contentLayout}>
        {homeArticleList?.map(item => (
          <TouchableOpacity
            key={item.article_title}
            style={articleStyle.articleLayout}
            onPress={() => goToDefault('ArticleInfo', item.article_id)}>
            <Image
              style={articleStyle.articleImage}
              source={{uri: item.article_image}}></Image>
            <Text style={articleStyle.articleTitle} numberOfLines={1}>
              {item.article_title}
            </Text>
            <Text style={articleStyle.articleInfo} numberOfLines={2}>
              {item.article_info}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  };

  const RenderHomeCommodity = () => {
    const articleStyle = StyleSheet.create({
      contentLayout: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginHorizontal: p(20),
      },
      commodityLayout: {
        width: p(160),
        height: p(180),
      },
      commodityImage: {
        height: p(120),
      },

      commodityInfo: {
        marginTop: p(8),
        color: '#000',
        fontSize: p(12),
      },
    });
    return (
      <View style={articleStyle.contentLayout}>
        {homeCommodityList?.map(item => (
          <TouchableOpacity
            key={item.commodity_name}
            style={articleStyle.commodityLayout}
            onPress={() => {
              navigation.push('CommodityInfo', {id: item.id});
            }}>
            <Image
              style={articleStyle.commodityImage}
              source={{uri: item.commodity_image}}></Image>
            <Text style={articleStyle.commodityInfo} numberOfLines={3}>
              {item.commodity_name}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  };

  const RenderHomeAddress = () => {
    const articleStyle = StyleSheet.create({
      contentLayout: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginHorizontal: p(20),
      },
      commodityLayout: {
        marginBottom: p(20),
        width: p(160),
        height: p(160),
      },
      commodityImage: {
        height: p(160),
      },

      commodityInfo: {
        position: 'absolute',
        top: p(10),
        left: p(10),
        color: '#fff',
        fontSize: p(18),
        fontWeight: 'bold',
      },
    });
    return (
      <View style={articleStyle.contentLayout}>
        {homeAddressList?.map(item => (
          <TouchableOpacity
            key={item.id}
            style={articleStyle.commodityLayout}
            onPress={() => {
              navigation.push('AddressInfo', {id: item.id});
            }}>
            <Image
              style={articleStyle.commodityImage}
              source={{uri: item.address_image}}></Image>
            <Text style={articleStyle.commodityInfo} numberOfLines={3}>
              {item.address_name}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  };

  const goToDefault = (url: string, id?: number) => {
    navigation.push(url, {id});
  };

  const renderHomeTitle = (title: string, url: string) => {
    const titleStyle = StyleSheet.create({
      contentLayout: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginHorizontal: p(25),
        marginTop: p(12),
        marginBottom: p(6),
      },
      left: {
        flexDirection: 'row',
        alignItems: 'center',
      },
      label: {
        width: p(10),
        height: p(10),
        marginRight: p(4),
        borderRadius: p(5),
        backgroundColor: activeColor,
      },
      title: {
        color: '#000',
        fontSize: p(18),
        fontWeight: 'bold',
      },
      moreButton: {
        fontSize: p(12),
        color: '#666',
      },
    });
    return (
      <View style={titleStyle.contentLayout}>
        <View style={titleStyle.left}>
          <View style={titleStyle.label}></View>
          <Text style={titleStyle.title}>{title}</Text>
        </View>
        <TouchableOpacity onPress={() => goToDefault(url)}>
          <Text style={titleStyle.moreButton}>更多</Text>
        </TouchableOpacity>
      </View>
    );
  };

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#eee'}}>
      <ScrollView style={styles.content}>
        <View><Text>首页</Text></View>
        {/* <Search
          placeholder="请输入关键词搜索"
          showSearchButton={false}
          onSearch={v => {
            console.log(v);
          }}
          style={{
            marginTop: p(10),
            marginBottom: p(0),
            marginHorizontal: p(10),
            backgroundColor: 'transparent',
          }}
        />

        {renderHomeTitle('热门精选', 'ArticleList')}
        <RenderHomeArticle />

        {renderHomeTitle('自由行', 'CommodityList')}
        <RenderHomeCommodity />

        {renderHomeTitle('异域风情', 'AddressList')}
        <RenderHomeAddress /> */}
      </ScrollView>
    </SafeAreaView>
  );
};
